<template>
	<view class="padd">
		<view class="noLogin hasFlex" v-if="!isLoginFlag" @tap="goLogin">
			<image class="defImg" src="../../static/images/defHead.png"></image>
			<view class="noLoginTxt">登录体验更多精彩~</view>
		</view>
		<view class="hasLogin spaceBet" v-if="isLoginFlag">
			<view class="userName hasFlex" @tap="goSetting">
				<image class="headImg" v-if="basicInfo.userPortrait == ''" src="../../static/images/defHead.png"></image>
				<image class="headImg" v-else :src="getCloudFilePath(basicInfo.userPortrait)"></image>
				<text>{{basicInfo.netName}}</text>
			</view>
			<!-- <view class="switchFields" @tap="switchFields">
				<text>{{sysRangeTxt}}</text>
				<text class="iconfont icon-gengduo"></text>
			</view> -->
		</view>
		<view class="mineMod spaceBet">
			<view class="itemMod zxOrder" @tap="goZxOrder">
				<view class="modTxt">咨询订单</view>
				<image class="modImg" src="../../static/images/mine/zxOrder.png"></image>
			</view>
			<view class="itemMod zxTcOrder" @tap="goZxTcOrder">
				<view class="modTxt">咨询套餐订单</view>
				<image class="modImg" src="../../static/images/mine/zxTc.png"></image> 
			</view>
		</view>
		<view class="mineItems">
			<view class="items" @tap="goMyFocus">
				<view class="leftItems hasFlex">
					<image class="itemsImg" src="../../static/images/mine/focus.png"></image>
					<text>我的关注</text>
				</view>
				<view class="iconfont icon-gengduo"></view>
			</view>
			<view class="items" @tap="goMyFeedBack">
				<view class="leftItems hasFlex">
					<image class="itemsImg" src="../../static/images/mine/feed.png"></image>
					<text>平台反馈</text>
				</view>
				<view class="iconfont icon-gengduo"></view>
			</view>
			<view class="items" @tap="contractUs">
				<view class="leftItems hasFlex">
					<image class="itemsImg" src="../../static/images/mine/kf.png"></image>
					<text>联系我们</text>
				</view>
				<view class="iconfont icon-gengduo"></view>
			</view>
			<view class="items" @tap="goAboutUs">
				<view class="leftItems hasFlex">
					<image class="itemsImg" src="../../static/images/mine/about.png"></image>
					<text>关于我们</text>
				</view>
				<view class="iconfont icon-gengduo"></view>
			</view>
			<view class="items" @tap="goSetting">
				<view class="leftItems hasFlex">
					<image class="itemsImg" src="../../static/images/mine/setting.png"></image>
					<text>设置</text>
				</view>
				<view class="iconfont icon-gengduo"></view>
			</view>
		</view>
		<common-alert :showAlertFlag="showAlertFlag" :maskClosable="maskClosable" @closeAlertComponent="closeAlertComponent">
			<kf-tel :kfTel="kfTel" :phones="phones" @cancel="cancel" @phoneCall="phoneCall"></kf-tel>
		</common-alert>
	</view>
</template>

<script>
	import { getMyInfo } from '@/api/mine/index'
	export default {
		data() {
			return {
				isLoginFlag:null,
				sysRangeTxt:'',
				showAlertFlag:false,
				basicInfo:{},
				inviteUserAccount:'',
				phones:'',
				kfTel:'',
				maskClosable:false
			}
		},
		onLoad(){
			this.phones = 'tel:' + uni.getStorageSync('mpOgzTel');
			this.kfTel = uni.getStorageSync('mpOgzTel');
		},
		onShow(){
			if(!uni.getStorageSync('userIdPss')){
				this.isLoginFlag = false;
			}else{
				this.hasLoginTO();
			}
		},
		methods: {
			hasLoginTO(){
				this.getMyInfo();
				this.isLoginFlag = true;
				if(uni.getStorageSync('sysRange')){//检测当前系统领域
					this.sysRangeTxt = uni.getStorageSync('sysRange');
				}else{
					this.sysRangeTxt = '选择领域'
				}
			},
			getMyInfo(){
				getMyInfo().then(res=>{
					this.basicInfo = res.data.datas[0];
					//this.inviteUserHead = res.data.datas[0].inviteUserHead;
					//this.inviteUserAccount = res.data.datas[0].inviteUserAccount;
				}).catch(err=>{});
			},
			contractUs(){
				this.showAlertFlag = true;
			},
			closeAlertComponent(){
				this.showAlertFlag = false;
			},
			cancel(){
				this.showAlertFlag = false;
			},
			phoneCall(){
				uni.makePhoneCall({
					phoneNumber:this.kfTel
				})
			},
			goAboutUs(){
				uni.navigateTo({
					url:'/pages/subMine/ogzDet/ogzDet'
				})
			},
			goLogin(){
				this.util.comNavigateToLogin('userFix');
			},
			goSetting(){
				if(uni.getStorageSync('userIdPss')){
					uni.setStorageSync('basicInfo',this.basicInfo);
					uni.navigateTo({
						url:'../subMine/setting/setting'
					})
				}else{
					this.util.comNavigateToLogin('userFix');
				}
			},
			goMyFeedBack(){
				if(uni.getStorageSync('userIdPss')){
					uni.navigateTo({
						url:'/pages/subMine/myFeedBack/myFeedBack?fromPage=feedBack'
					})
				}else{
					this.util.comNavigateToLogin('userFix');
				}
			},
			goMyjB(){
				if(uni.getStorageSync('userIdPss')){
					uni.navigateTo({
						url:'/pages/subMine/myFeedBack/myFeedBack?fromPage=illegalReport'
					})
				}else{
					this.util.comNavigateToLogin('userFix');
				}
			},
			goMyFocus(){
				if(uni.getStorageSync('userIdPss')){
					uni.navigateTo({
						url:'../subMine/muFocus/muFocus'
					})
				}else{
					this.util.comNavigateToLogin('userFix');
				}
			},
			goZxOrder(){
				if(uni.getStorageSync('userIdPss')){
					uni.navigateTo({
						url:'../subMine/zxOrder/zxOrder'
					})
				}else{
					this.util.comNavigateToLogin('userFix');
				}
			},
			goZxTcOrder(){
				if(uni.getStorageSync('userIdPss')){
					uni.navigateTo({
						url:'../subMine/zxTcOrder/zxTcOrder'
					})
				}else{
					this.util.comNavigateToLogin('userFix');
				}
			},
			goTtOrder(){
				if(uni.getStorageSync('userIdPss')){
					uni.navigateTo({
						url:'../subMine/groupOrder/groupOrder'
					})
				}else{
					this.util.comNavigateToLogin('userFix');
				}
			},
			switchFields(){
				uni.navigateTo({
					url:'../subMine/selectFields/selectFields'
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/scss/helpCen.scss';
	.hasLogin{
		padding: 20rpx 0;
		align-items: center;
		position: relative;
		.userName{
			font-size: 32rpx;
			color: $pss-text-color3;
			font-weight: bold;
			align-items: center;
			.headImg{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 15rpx;
			}
		}
		/* 切换领域 */
		.switchFields{
			height: 56rpx;
			line-height: 56rpx;
			border-radius: 50rpx 0 0 50rpx;
			background: #fff7ea;
			color: $pss-color-primary_1;
			font-size: $font-size26;
			padding: 0 25rpx 0 15rpx;
			.icon-gengduo{
				font-size: $font-size26;
			}
		}
	}
	.items{
		height: 100rpx;
		line-height: 100rpx;
		font-size: $font-size28;
		color: $pss-text-color3;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		.leftItems{
			height: 100%;
			align-items: center;
			.itemsImg{
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}
		}
		.icon-gengduo{
			font-size: $font-size26;
			color: $pss-text-colord;
		}
	}
	.mineMod{
		margin:50rpx 0 30rpx;
		.itemMod{
			flex: 1;
			height: 136rpx;
			border-radius: 8rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			.modTxt{
				font-size: 32rpx;
				margin-left: 20rpx;
			}
			.modImg{
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}
			&::after{
				content: '';
				width: 4rpx;
				height: 28rpx;
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -14rpx;
			}
			&.zxOrder{
				background: linear-gradient(180deg, #F7EBD1 0%, #FCFBF9 100%);
				color: #FFA510;
				box-shadow: 0px 1px 2px #F8EDD5;
				&::after{
					background: #FFA510;
				}
			}
			&.zxTcOrder{
				background: linear-gradient(0deg, #F7FDFD 0%, #CAF1EC 100%);
				color: #02C396;
				box-shadow: 0px 1px 2px #CFF2EE;
				&::after{
					background: #02C396;
				}
			}
			&:first-child{
				margin-right: 30rpx;
			}
		}
	}
	.noLogin{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
		.defImg{
			width: 100rpx;
			height: 100rpx;
		}
		.noLoginTxt{
			font-size: 28rpx;
			color: $pss-text-colora;
			margin-top: 20rpx;
		}
	}
</style>
